<template>
  <div class="container">
    <div class="nav">
      <div class="top">
        <div @click="goBack">
          <i></i>
        </div>
        <h1>个人信息</h1>
      </div>
      <!-- 头像 -->
      <div class="text">
        <h6>头像</h6>

        <div class="img">
          <img :src="head" alt="" v-if="head" @click="afterRead"/>
          <i v-if="head"></i>
          <van-uploader :after-read="afterRead" v-if="!head" preview-size="55px" />
        </div>
      </div>
      <!-- 昵称 -->
      <div class="text">
        <h6>昵称</h6>

        <div class="img" @click="changename">
          <h6 v-show="showthis"  >{{name}}</h6>
          <input type="text" v-model="name" v-show="!showthis" @blur="noon">
          <i></i>
        </div>
      </div>
      <!-- 生日 -->
      <div class="text">
        <h6>生日</h6>


        <div class="img" >
          <!-- <h6>未设置</h6> -->
        <van-cell is-link @click="showPopup">{{thetime}}</van-cell>
        <van-popup v-model:show="show" position="bottom" :style="{ height: '50%' }">
            <!-- 生日 -->
            <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="选择年月日"
              :min-date="minDate"
              :max-date="maxDate"
              @confirm='daythis'
              @cancel='cancels'
            />

        </van-popup>
          <i></i>
        </div>


        
      </div>
      <!-- 性别 -->
      <div class="text">
        <h6>性别</h6>

        <div class="img">
          <!-- <h6>未设置</h6> -->
          <van-cell is-link @click="showPopup1">{{sex}}</van-cell>
          <van-popup v-model:show="show1" position="bottom" :style="{ height: '50%' }">
            <van-picker
              title="性别"
              :columns="columns"
              @confirm="onConfirm"
              @cancel="onCancel"
            />
              
        </van-popup>
          <i></i>
        </div>
      </div>
      <!-- 手机号 -->
      <div class="text">
        <h6>手机</h6>

        <div class="img">
          <h6>{{phone}}</h6>
          <i></i>
        </div>
      </div>
      <!-- 学段 -->
      <div class="text">
        <h6>学段</h6>

        <div class="img">
          <!-- <h6>四级</h6> -->
          <van-cell is-link @click="showPopup2">{{studylevel}}</van-cell>
          <van-popup v-model:show="show2" position="bottom" :style="{ height: '50%' }">
            <van-picker
              title="学段"
              :columns="columns1"
              @confirm="onConfirm1"
              @cancel="onCancel1"
            />
              
        </van-popup>
          <i></i>
        </div>
      </div>
      
    </div>

    <footer>
      <!-- 添加信息 -->
      <div class="box" @click="addmessage">保存</div>
    </footer>
  </div>
</template>

<script>
import { ref } from '@vue/reactivity'
import { useRouter } from 'vue-router'
import store from '@/store'

export default {
  setup() {
    let router = useRouter()
    //头像
    let head = ref("")
    //名字
    let name = ref("邱智贤")
    let showthis = ref(true)
    //时间默认设定
    const currentDate = ref(new Date(2020, 0, 17));
    //时间的弹窗
    const show = ref(false);
    const show1 = ref(false);
    const show2 = ref(false);
    //获取手机号码
    let phone = ref(0)
    phone.value=store.state.phone
    //学段
    let studylevel = ref("四级")
    //时间
    let thetime = ref("未设置")
    //性别
    const columns = ['男', '女', '保密'];
    const columns1 = ['四级', '六级', '考研','专四','专八'];
    let sex = ref("未设置")
    const showPopup = () => {
      show.value = true;
    };
    const showPopup1 = () => {
      show1.value = true;
    };
    const showPopup2 = () => {
      show2.value = true;
    };
    const afterRead = (file) => {
      // 此时可以自行将文件上传至服务器
      //获取到图片信息
      // console.log(file.content);
      head.value = file.content
      //然后保存到本地
      window.localStorage.setItem("headimg",JSON.stringify(head.value))
    };
    //获取头像信息
    let headlocal=JSON.parse(window.localStorage.getItem("headimg"))
    //如果有的话,换头像
    if(headlocal&&headlocal!=undefined){
      
      head.value=headlocal
    }
    //改名字
    let changename = () =>{
      // console.log("2");
      showthis.value = false
    } 
    //失去焦点事件
    let noon=()=>{
    //  console.log(name.value);
     showthis.value = true
    }
    //点击确定时间
    let daythis=(e)=>{
      getSimpleDate(e)
      thetime.value = getSimpleDate(e).split(" ")[0];
      console.log(thetime.value);
      show.value = false;
    }
    //点击取消时间
    let cancels=()=>{
      show.value = false;
    }
    //点击性别确定
    let onConfirm = (value)=>{
      sex.value=value
      show1.value = false;
    }
    //点击性别取消
    let onCancel = ()=>{
      show1.value = false;
    }
    //点击学段确定
    let onConfirm1 = (value)=>{
      studylevel.value=value
      show2.value = false;
    }
    //点击学段取消
    let onCancel1 = ()=>{
      show2.value = false;
    }

    //时间戳转换
    const getSimpleDate = (date) => {
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      var minute = date.getMinutes();
      minute = minute < 10 ? "0" + minute : minute;
      var s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + s;
    };
    //点击保存信息
    let addmessage=()=>{
      let messageData = {}
      messageData.name=name.value
      messageData.thetime=thetime.value
      messageData.sex=sex.value
      messageData.studylevel=studylevel.value
      //保存到本地
      window.localStorage.setItem("addmessage",JSON.stringify(messageData))
      //页面跳转
      router.push({
        path:"/my"
      })

    }
    //开始时读取信息
    let readmessage=()=>{
      
      name.value=reader.name
      thetime.value=reader.thetime
      sex.value=reader.sex
      studylevel.value=reader.studylevel
    }
    let reader = JSON.parse(window.localStorage.getItem("addmessage"))
    

    if(reader){
      readmessage()
    }
    let goBack = () => {
      router.go(-1)
    }
    


    return {
      sex,
      goBack,
      afterRead,
      head,
      changename,
      name,
      showthis,
      noon,
      minDate: new Date(2001, 1, 1),
      maxDate: new Date(2022, 12, 1),
      currentDate,
      show,showPopup,
      daythis,
      thetime,
      cancels,
      showPopup1,show1,
      showPopup2,show2,
      columns,columns1,
      onConfirm,
      onCancel,
      onConfirm1,
      onCancel1,
      studylevel,
      phone,
      addmessage
      
    }
  },
}
</script>
<style lang="scss" scoped>
@import "../assets/css/base.css";
::v-deep .van-icon-arrow:before{
  display: none;
}
::v-deep .van-cell__value--alone{
  text-align: right;
  margin-right: -10px;
  color: #222222;
}
.nav {
  display: flex;
  flex-direction: column;
}

.nav .top {
  margin: 15px 0px 0px 15px;
  display: flex;
  flex-direction: column;
}

.nav .top i {
  display: block;
  background-image: url(../assets/img/back.eb96d29.png);
  width: 22px;
  height: 22px;
  background-size: 22px 22px;
}

.nav .top h1 {
  height: 68px;
  line-height: 68px;
  margin-top: 4px;
  font-weight: bold;
  font-size: 24px;
}

.nav .text {
  display: flex;
  border-bottom: 1px solid #f6f6f6;
  height: 55px;
  line-height: 55px;
  color: #c0c0c2;
  margin-left: 15px;
  padding-right: 15px;
  justify-content: space-between;
}

.nav .text h6 {
  font-size: 15px;

}

.nav .text .img {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: end;
  input{
    color: #222222;
    text-align: right;
    padding-right: 10px;
  }
}

.nav .text .img img {
  width: 39px;
  height: 39px;
  border-radius: 50%;
  margin-right: 10px;
  border: 1px solid #edeff0;
}

.nav .text .img i {
  display: block;
  background-image: url(../assets/img/ic_right.1a162c4.png);
  background-size: 6px 11px;
  width: 6px;
  height: 11px;
}

.nav .text .img>h6 {
  color: #222;
  margin-right: 10px;
}

footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  height: 66px;
  box-shadow: 0 -3px 3px 0px #d2d3d4;
  background-color: #ffffff;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  padding: 0px 15px;
  display: flex;
  align-items: center;
}
footer .box {
  height: 40px;
  line-height: 40px;
  flex: 1;
  text-align: center;
  border-radius: 20px;
  background-color: #5468ff;
  color: #fff2fa;
}
</style>